<template>
  <view class="page-b">
    

    <!-- 顶部自定义导航 -->
    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
        <view class="custom-nav__back" @click="tn('')">
          <!-- <view class="logo-pic" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg')">
            <view class="logo-image">
              <tn-badge backgroundColor="#E72F8C" :dot="true" :radius="16" :absolute="true" :translateCenter="false"></tn-badge>
            </view>
          </view> -->
          <view class="tn-icon-add-circle"></view>
        </view>
        <view class="tn-margin-top tn-margin-left" style="text-shadow:  1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
          <tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" :bold="true" :fontSize="36"></tn-tabs>
        </view>
      </view>
    </tn-nav-bar>
    
    
    <!-- 发现 -->
    <view class="" v-if="current==0">
      
      <view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}" @click="tn('/circlePages/nav')">
        <view class="tn-flex tn-flex-row-between tn-round tn-padding-xs tn-margin" style="border: 1rpx solid #D6D1F0;background: linear-gradient(-160deg, #F1F7FF, #DEE6FF, #F3F8FF, #D0DBFF);">
          <view class="justify-content-item tn-text-center tn-flex" style="padding: 25rpx 30rpx">
            <tn-avatar-group :lists="latestUserAvatar" size="sm"></tn-avatar-group> 
            <text class="tn-padding-xs">1.29W 人</text>
          </view>
          <view class="justify-content-item tn-text-right tn-padding-top-sm">
            <view class="tn-text-bold">
              后浪 · 博客社区
            </view>
            <view class="tn-text-xs tn-color-gray--dark tn-padding-top-xs">
              美好社区，邀你共建
            </view>
          </view>
          <view class="justify-content-item tn-text-right tn-margin-right tn-padding-top-lg">
            <text class="tn-icon-right tn-color-gray--dark"></text>
          </view>
        </view>
      </view>
      
      <view class="tn-flex tn-flex-row-between tn-margin-top">
        <view class="justify-content-item tn-margin tn-text-bold tn-text-xl">
        精选圈子
        </view>
        <view class="justify-content-item tn-margin tn-text-lg tn-color-cat">
          <text class="tn-padding-xs">全部</text>
          <text class="tn-icon-topics"></text>
        </view>
      </view>
      
      <view class="">
        <!-- 方式16 start-->
        <view class="tn-flex tn-flex-wrap tn-margin-bottom">
          <block v-for="(item, index) in bloggerList" :key="index">
            <view class="" style="width: 33.3%;" @click="tn('/circlePages/group')">
              <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center ">
                <view class="tn-radius tn-padding-sm">
                  <view class="image-pic" :style="'background-image:url('+ item.url +')'">
                    <view class="image-circle">
                      <view :class="[`tn-icon-${item.icon} tn-color-${item.color}`]"  style="position: absolute;margin: 165rpx 0 0 72rpx;border-radius: 100rpx;background-color: #FFFFFF;padding: 5rpx;"></view>
                    </view>
                  </view>
                  <view class="tn-text-center tn-text-bold tn-padding-top-sm">{{item.name}}</view>
                  <view class="tn-text-center tn-text-xs tn-color-gray--dark tn-padding-top-xs">{{item.text}}</view>
                </view>
              </view>
            </view>
          </block>
        </view>
        <!-- 方式16 end-->
      </view>
    
      <view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom">
     
        <!-- 图文信息 -->
        <block v-for="(item,index) in content">
          <view class="blogger__item home-shadow tn-margin-left tn-margin-right tn-margin-bottom" :key="index">
            <view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
              <view class="justify__author__info" @click="tn('/pageA/author/author')">
                <view class="tn-flex tn-flex-row-center">
                  <view class="tn-flex tn-flex-row-center tn-flex-col-center">
                    <view class="">
                      <tn-avatar
                        class=""
                        shape="circle"
                        :src="item.userAvatar"
                        size="lg">
                      </tn-avatar>
                    </view>
                    <view class="tn-padding-right tn-text-ellipsis">
                      <view class="tn-padding-right tn-padding-left-sm tn-text-bold tn-text-lg">{{ item.userName }}</view>
                      <view class="tn-padding-right tn-padding-left-sm tn-padding-top-xs tn-color-gray">{{ item.date }}</view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
                <!-- 为什么不放关注按钮，因为快餐文化的世界，关注按钮放在外面没必要 -->
                <text class="tn-icon-more-vertical tn-color-gray tn-text-bold tn-text-xxl"></text>
              </view>
            </view>
           
            <view class="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex-col-center tn-flex-row-left" @click="tn('/pageA/details/details')">
              <view v-for="(label_item,label_index) in item.label" :key="label_index" class="blogger__desc__label tn-float-left tn-margin-right">
                <text class="blogger__desc__label--prefix tn-icon-topics-fill"></text> 
                <text class="tn-text-df">{{ label_item }}</text>
              </view>
              <!-- 不用限制长度了，因为发布的时候限制长度了-->
              <text v-if="!item.label || item.label.length < 4" class="blogger__desc__content tn-flex-1 tn-text-justify tn-text-df">{{ item.desc }}</text>  
            </view>
            
            <!-- 内容太多疲劳了-->
            <!-- <view
              v-if="item.content"
              class="blogger__content"
              :id="`blogger__content--${index}`"
            >
              <view
                class="blogger__content__data clamp-text-2">
                {{ item.content }}
              </view>
            </view> -->
            
            <block v-if="item.mainImage">
              <view v-if="[1,2,4].indexOf(item.mainImage.length) != -1" class="tn-padding-top-xs" @click="tn('/pageA/details/details')">
                <image v-for="(image_item,image_index) in item.mainImage" :key="image_index" 
                  class="blogger__main-image"
                  :class="{
                    'blogger__main-image--1 tn-margin-bottom-sm': item.mainImage.length === 1,
                    'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.mainImage.length === 2 || item.mainImage.length === 4
                  }"
                  :src="image_item"
                  mode="aspectFill"
                ></image>
              </view>
              <view v-else class="tn-padding-top-xs" @click="tn('/pageA/details/details')">
                <tn-grid  hoverClass="none" :col="3">
                  <block v-for="(image_item,image_index) in item.mainImage" :key="image_index">
                    <!-- #ifndef MP-WEIXIN -->
                    <tn-grid-item style="width: 30%;margin: 0rpx 20rpx 20rpx 0;">
                      <image
                        class="blogger__main-image blogger__main-image--3"
                        :src="image_item"
                        mode="aspectFill"
                      ></image>
                    </tn-grid-item>
                    <!-- #endif-->
                    <!-- #ifdef MP-WEIXIN -->
                    <tn-grid-item style="width: 30%;margin: 0rpx 20rpx 20rpx 0;">
                      <image
                        class="blogger__main-image blogger__main-image--3"
                        :src="image_item"
                        mode="aspectFill"
                      ></image>
                    </tn-grid-item>
                    <!-- #endif-->
                  </block>
                </tn-grid>
              </view>
            </block>
           
            <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs" @click="tn('/pageA/details/details')">
              <view class="justify-content-item tn-color-gray tn-text-center">
                <view class="">
                  <text class="blogger__count-icon tn-icon-fire tn-text-lg"></text> 
                  <text class="tn-padding-right tn-text-df">{{ item.collectionCount }}</text>
                  <text class="blogger__count-icon tn-icon-message tn-text-lg"></text>
                  <text class="tn-padding-right tn-text-df">{{ item.commentCount }}</text>
                  <text class="blogger__count-icon tn-icon-like-lack tn-text-lg"></text>
                  <text class="tn-text-df">{{ item.likeCount }}</text>
                </view>
              </view>
              <view class="justify-content-item tn-flex tn-flex-col-center">
                <view style="margin-left: -10rpx;margin-right: 6rpx;transform: scale(0.85);">
                  <tn-avatar-group :lists="item.viewUser.latestUserAvatar" size="sm"></tn-avatar-group>
                </view>
                <text class="tn-color-gray">{{ item.viewUser.viewUserCount }}人</text>
              </view>
            </view>
          </view>
          
          <!-- 边距间隔 -->
          <!-- <view class="tn-strip-bottom" v-if="index != content.length - 1"></view> -->
        </block>
        
        <!-- 边距间隔 -->
        <!-- <view class="tn-strip-bottom"></view> -->
        
        <!-- 广告 -->
        <view class="blogger__item home-shadow tn-margin-left tn-margin-right tn-margin-bottom" @click="tn('')">
          <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
            <view class="justify-content-item">
              <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                <!-- 图标logo -->
                <view class="ad-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
                  <view class="ad-image">
                  </view>
                </view>
                <view class="tn-padding-right" style="width: 65vw;">
                  <view class="tn-padding-right tn-padding-left-sm tn-text-bold tn-text-lg">抓住那只猪科技有限公司</view>
                  <view class="tn-padding-right tn-padding-left-sm tn-color-gray tn-text-ellipsis">我们都是好好孩子</view>
                </view>
                
              </view>
            </view>
            <view class="tn-color-gray">广告</view>
          </view>
          <tn-stack-swiper ref="stackSwiper" :list="adList" :switchRate="30" :height="360" width="92%" :autoplay="adAutoplay"></tn-stack-swiper>
        </view>
        
        <!-- 边距间隔 -->
        <!-- <view class="tn-strip-bottom"></view> -->
        
        <!-- 图文信息 -->
        <block v-for="(item,index) in content">
          <view class="blogger__item home-shadow tn-margin-left tn-margin-right tn-margin-bottom" :key="index">
            <view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
              <view class="justify__author__info" @click="tn('/pageA/author/author')">
                <view class="tn-flex tn-flex-row-center">
                  <view class="tn-flex tn-flex-row-center tn-flex-col-center">
                    <view class="">
                      <tn-avatar
                        class=""
                        shape="circle"
                        :src="item.userAvatar"
                        size="lg">
                      </tn-avatar>
                    </view>
                    <view class="tn-padding-right tn-text-ellipsis">
                      <view class="tn-padding-right tn-padding-left-sm tn-text-bold tn-text-lg">{{ item.userName }}</view>
                      <view class="tn-padding-right tn-padding-left-sm tn-padding-top-xs tn-color-gray">{{ item.date }}</view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
                <!-- 为什么不放关注按钮，因为快餐文化的世界，关注按钮放在外面没必要 -->
                <text class="tn-icon-more-vertical tn-color-gray tn-text-bold tn-text-xxl"></text>
              </view>
            </view>
           
            <view class="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex-col-center tn-flex-row-left" @click="tn('/pageA/details/details')">
              <view v-for="(label_item,label_index) in item.label" :key="label_index" class="blogger__desc__label tn-float-left tn-margin-right">
                <text class="blogger__desc__label--prefix tn-icon-topics-fill"></text> 
                <text class="tn-text-df">{{ label_item }}</text>
              </view>
              <!-- 不用限制长度了，因为发布的时候限制长度了-->
              <text v-if="!item.label || item.label.length < 4" class="blogger__desc__content tn-flex-1 tn-text-justify tn-text-df">{{ item.desc }}</text>  
            </view>
            
            <!-- 内容太多疲劳了-->
            <!-- <view
              v-if="item.content"
              class="blogger__content"
              :id="`blogger__content--${index}`"
            >
              <view
                class="blogger__content__data clamp-text-2">
                {{ item.content }}
              </view>
            </view> -->
            
            <block v-if="item.mainImage">
              <view v-if="[1,2,4].indexOf(item.mainImage.length) != -1" class="tn-padding-top-xs" @click="tn('/pageA/details/details')">
                <image v-for="(image_item,image_index) in item.mainImage" :key="image_index" 
                  class="blogger__main-image"
                  :class="{
                    'blogger__main-image--1 tn-margin-bottom-sm': item.mainImage.length === 1,
                    'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.mainImage.length === 2 || item.mainImage.length === 4
                  }"
                  :src="image_item"
                  mode="aspectFill"
                ></image>
              </view>
              <view v-else class="tn-padding-top-xs" @click="tn('/pageA/details/details')">
                <tn-grid  hoverClass="none" :col="3">
                  <block v-for="(image_item,image_index) in item.mainImage" :key="image_index">
                    <!-- #ifndef MP-WEIXIN -->
                    <tn-grid-item style="width: 30%;margin: 0rpx 20rpx 20rpx 0;">
                      <image
                        class="blogger__main-image blogger__main-image--3"
                        :src="image_item"
                        mode="aspectFill"
                      ></image>
                    </tn-grid-item>
                    <!-- #endif-->
                    <!-- #ifdef MP-WEIXIN -->
                    <tn-grid-item style="width: 30%;margin: 0rpx 20rpx 20rpx 0;">
                      <image
                        class="blogger__main-image blogger__main-image--3"
                        :src="image_item"
                        mode="aspectFill"
                      ></image>
                    </tn-grid-item>
                    <!-- #endif-->
                  </block>
                </tn-grid>
              </view>
            </block>
           
            <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs" @click="tn('/pageA/details/details')">
              <view class="justify-content-item tn-color-gray tn-text-center">
                <view class="">
                  <text class="blogger__count-icon tn-icon-fire tn-text-lg"></text> 
                  <text class="tn-padding-right tn-text-df">{{ item.collectionCount }}</text>
                  <text class="blogger__count-icon tn-icon-message tn-text-lg"></text>
                  <text class="tn-padding-right tn-text-df">{{ item.commentCount }}</text>
                  <text class="blogger__count-icon tn-icon-like-lack tn-text-lg"></text>
                  <text class="tn-text-df">{{ item.likeCount }}</text>
                </view>
              </view>
              <view class="justify-content-item tn-flex tn-flex-col-center">
                <view style="margin-left: -10rpx;margin-right: 6rpx;transform: scale(0.85);">
                  <tn-avatar-group :lists="item.viewUser.latestUserAvatar" size="sm"></tn-avatar-group>
                </view>
                <text class="tn-color-gray">{{ item.viewUser.viewUserCount }}人</text>
              </view>
            </view>
          </view>
          
          <!-- 边距间隔 -->
          <!-- <view class="tn-strip-bottom" v-if="index != content.length - 1"></view> -->
        </block>
         
            
      </view>
      
      <view class='tn-tabbar-height'></view>
      
    </view>
    
    <view class="" v-if="current==1" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <!-- 视频，采用轮播形式，放10个视频左右，小程序性能决定了这个不能太骚，如果你想骚，可以把微信买下来 -->
      <!-- <swiper class="card-swiper" :circular="true" vertical="true"
        :autoplay="false" duration="500" interval="5000" @change="cardSwiper" > 
        <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
          <view class="swiper-item image-banner">
                      <video :id="`video-${item.id}`" :src="item.mp4"
                      loop style="height: 100vh;width: 100vw;"></video>
          </view>
    
        </swiper-item>
      </swiper>
      <view class="indication">
          <block v-for="(item,index) in swiperList" :key="index">
              <view class="spot" :class="cardCur==index?'active':''"></view>
          </block>
      </view> -->
      
      
      <view class="">
        <swiper class="card-swiper" @click="tn('/homePages/navigation')" :circular="true"
          :autoplay="true" duration="500" interval="8000" @change="cardSwiper"> 
          <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
            <view class="swiper-item image-banner" :style="'background-image:url('+ item.url + ');background-size: cover;border-radius: 15rpx;'">
            </view>
            <!-- <view class="swiper-item-text">
              <view class="tn-text-bold tn-color-white" style="font-size: 50rpx;">{{item.title}}</view>
              <view class="tn-color-white tn-padding-top" style="font-size: 30rpx;">{{item.name}}</view>
              <view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">{{item.text}}</view>
            </view> -->
          </swiper-item>
        </swiper>
        <view class="indication">
            <block v-for="(item,index) in swiperList" :key="index">
                <view class="spot" :class="cardCur==index?'active':''"></view>
            </block>
        </view>
      </view>
      
      
      
      <!-- <view class="" @click="tn('/activityPages/topic')" style="padding: 10rpx 0 0rpx 0;">
        <view class="tn-plan-content tn-margin tn-text-justify">
          <view v-for="(item,index) in planList" :key="index" class="tn-plan-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
            <text class="tn-plan-content__item--prefix">#</text> {{item.name}}
          </view>
        </view>
      </view> -->
      
      
      <view class="" style="padding: 30rpx 20rpx;" >
        <tn-waterfall ref="waterfall" v-model="list" @finish="handleWaterFallFinish">
          <template v-slot:left="{ leftList }">
            <view v-for="(item, index) in leftList" :key="item.id" class="product__item home-shadow" @click="tn('/pageA/resource/resource')">
              <view class="item__image">
                <tn-lazy-load :threshold="6000" height="100%" :image="item.mainImage" :index="item.id" imgMode="widthFix"></tn-lazy-load>
              </view>
              <view class="item__data tn-margin-left-sm tn-margin-right-sm">
                <view class="item__title-container">
                  <!-- <view v-if="item.newProduct" class="item__store-type tn-bg-gray--light">标签</view>
                  <view v-else-if="item.storeType === 1" class="item__store-type tn-cool-bg-color-1">SVIP</view> -->
                  <text class="item__title tn-color-cat clamp-text-2">{{ item.title }}</text>
                </view>
                <view v-if="item.tags && item.tags.length > 0" class="item__tags-container">
                  <view v-for="(tagItem, tagIndex) in item.tags" :key="tagIndex"
                    class="justify-content-item tn-tag-content__item tn-margin-right tn-margin-top-xs tn-margin-bottom-x tn-text-sm tn-text-bold">
                    <text class="tn-tag-content__item--prefix">#</text> {{ tagItem }}
                  </view>
                </view>
                
                
                
                <!-- 
                <view v-if="item.tags && item.tags.length > 0" class="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex-col-center tn-flex-row-left">
                  <view v-for="(tagItem, tagIndex) in item.tags" :key="tagIndex" class="blogger__desc__label tn-float-left tn-margin-right">
                    <text class="blogger__desc__label--prefix tn-icon-topics-fill"></text> 
                    <text class="tn-text-df">{{ label_item }}</text>
                  </view>
                </view> -->
                
                <!-- <view class="item__price-container tn-color-purplered">
                  <text class="item__price--unit">￥</text>
                  <text class="item__price--integer">{{ item.price }}</text>
                  <text class="tn-color-gray tn-text-sm tn-padding-left-sm" style="font-size: 24rpx;">{{ item.likeCount }} 人评论</text>
                </view> -->
                <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xs">
                  <view class="justify-content-item">
                    <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                      <view class="logo-pic">
                        <view class="logo-image">
                          <view class="" :style="'background-image:url('+ item.userImage +');width: 40rpx;height: 40rpx;background-size: cover;'">
                          </view>
                        </view>
                      </view>
                      <view class="tn-padding-left-xs">
                        <text class="tn-color-gray tn-text-sm">{{ item.userName }}</text>
                      </view>
                
                    </view>
                  </view>
                  <view class="justify-content-item">
                    <text class="tn-icon-fire tn-color-gray" style="padding-right: 5rpx;"></text>
                    <text class="tn-color-gray">{{ item.viewUser.viewUserCount }}</text>
                  </view>
                </view>
                
                
              </view>
            </view>
          </template>
          <template v-slot:right="{ rightList }">
            <view class="tn-color-white tn-text-bold home-shadow" style="background-color: #3668fc;height: 160rpx;margin: 0 10rpx 20rpx 10rpx;border-radius: 10rpx;" @click="tn('/pageB/edit/edit')">
              <view class="tn-padding-left tn-padding-top-lg" style="margin-top: 6rpx;">
                寻求 · 更多资源
              </view>
              <view class="tn-padding-left tn-padding-top-xs">
                提交你的资源需求
                <text class="tn-icon-rocket-fill tn-padding-left-xs"></text>
              </view>
            </view>
            <view v-for="(item, index) in rightList" :key="item.id" class="product__item home-shadow" @click="tn('/pageA/resource/resource')">
              <view class="item__image">
                <tn-lazy-load :threshold="6000" height="100%" :image="item.mainImage" :index="item.id" imgMode="widthFix"></tn-lazy-load>
              </view>
              <view class="item__data tn-margin-left-sm tn-margin-right-sm">
                <view class="item__title-container">
                  <!-- <view v-if="item.storeType === 1" class="item__store-type tn-cool-bg-color-5">VIP</view> -->
                  <text class="item__title tn-color-cat clamp-text-2">{{ item.title }}</text>
                </view>
                <view class="item__tags-container">
                  <view v-for="(tagItem, tagIndex) in item.tags" :key="tagIndex"
                    class="justify-content-item tn-tag-content__item tn-margin-right tn-margin-top-xs tn-margin-bottom-x tn-text-sm tn-text-bold">
                    <text class="tn-tag-content__item--prefix">#</text> {{ tagItem }}
                  </view>
                </view>
                <!-- <view class="item__price-container tn-color-purplered">
                  <text class="item__price--unit">￥</text>
                  <text class="item__price--integer">{{ item.price }}</text>
                  <text class="tn-color-gray tn-text-sm tn-padding-left-sm" style="font-size: 24rpx;">{{ item.likeCount }} 人评论</text>
                </view> -->
                <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xs">
                  <view class="justify-content-item">
                    <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                      <view class="logo-pic">
                        <view class="logo-image">
                          <view class="" :style="'background-image:url('+ item.userImage +');width: 40rpx;height: 40rpx;background-size: cover;'">
                          </view>
                        </view>
                      </view>
                      <view class="tn-padding-left-xs">
                        <text class="tn-color-gray tn-text-sm">{{ item.userName }}</text>
                      </view>
                
                    </view>
                  </view>
                  <view class="justify-content-item">
                    <text class="tn-icon-fire tn-color-gray" style="padding-right: 5rpx;"></text>
                    <text class="tn-color-gray">{{ item.viewUser.viewUserCount }}</text>
                  </view>
                </view>
              </view>
            </view>
          </template>
        </tn-waterfall>
      </view>
      <tn-load-more :status="loadStatus"></tn-load-more>
      
      
      
    </view>
    
    <!-- 活动 -->
    <view class="" v-if="current==2">
      <view class="tn-margin-bottom-lg" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
        
        
        <!-- 图标logo/头像 -->
        <!-- <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xl tn-margin" v-for="(item, index) in 9" :key="index" @click="tn('/circlePages/blogger_other')">
          <view class="justify-content-item">
            <view class="tn-flex tn-flex-col-center tn-flex-row-left">
              <view class="logo-pic2 tn-shadow">
                <view class="logo-image2">
                  <view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg');width: 90rpx;height: 90rpx;background-size: cover;">
                  </view>
                </view>
              </view>
              <view class="tn-padding-right tn-padding-left-sm">
                <view class="tn-padding-right tn-text-lg tn-text-bold tn-color-black">
                  抓住那只高产母猪
                </view>
                <view class="tn-padding-right tn-text-ellipsis tn-text-sm tn-color-gray" style="padding-top: 8rpx;">
                  最近发文2023-12-12 16:09:23
                </view>
              </view>
            </view>
          </view>
          <view class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
            <text class="tn-bg-gray--light tn-round tn-text-df tn-text-bold tn-color-gray" style="padding: 10rpx 24rpx;">已关注</text>
          </view>
        </view> -->
        
        
        
        
        
        <block v-for="(item, index) in reserve" :key="index">
          <view class="article-shadow tn-margin" @click="tn('')">
            <view class="tn-flex">
              <view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.userAvatar + ')'">
                <view class="image-article">
                </view>
              </view>
              <view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
                <view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
                  {{ item.title }}
                </view>
                <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-padding-top-xs" style="min-height: 105rpx;">
                  <!-- <text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
                    {{ item.desc }}
                  </text> -->
                  <view class="justify-content-item tn-flex tn-flex-col-center">
                    <view style="margin-left: -10rpx;margin-right: 6rpx;transform: scale(0.85);">
                      <tn-avatar-group :lists="item.viewUser.latestUserAvatar" size="sm"></tn-avatar-group>
                    </view>
                    <text class="tn-color-gray">{{ item.viewUser.viewUserCount }} 人参与</text>
                  </view>
                  <!-- <view class="justify-content-item tn-flex tn-flex-col-center">
                    <text class="tn-color-gray">{{ item.viewUser.viewUserCount }} 人参与</text>
                  </view> -->
                </view>
                <view class="tn-flex tn-flex-row-between tn-flex-col-between">
                  <view v-for="(label_item,label_index) in item.label" :key="label_index"
                    class="justify-content-item tn-tag-content__item tn-margin-right tn-text-sm tn-text-bold">
                    <text class="tn-tag-content__item--prefix">#</text> {{ label_item }}
                  </view>
                  <view class="justify-content-item tn-color-gray tn-text-center" style="padding-top: 5rpx;">
                    <text class="tn-icon-fire tn-text-lg" style="padding-right: 5rpx;"></text>
                    <text class="tn-padding-right tn-text-df">{{ item.collectionCount }}</text>
                    <text class="tn-icon-like-lack tn-text-lg" style="padding-right: 5rpx;"></text>
                    <text class="tn-text-df">{{ item.likeCount }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
      <view class='tn-tabbar-height'></view>
    </view>
    
    <!-- 压屏窗-->
    <tn-landscape :show="show2" @close="closeLandscape" closePosition="bottom" :closeSize="60">
      
      <!-- 方式9 start-->
      <view class="tn-flex" style="margin-bottom: 100rpx;padding-top: 46vh;">
        <view class="tn-flex-1 tn-margin-right-lg tn-radius" @click="navEdit">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-cyan tn-color-white">
              <view class="tn-icon-camera-fill"></view>
            </view>  
            <view class="tn-color-white tn-text-sm tn-text-center">
              <text class="tn-text-ellipsis">发布动态</text>
            </view>
          </view>
        </view>
        <view class="tn-flex-1 tn-margin-left-lg tn-radius" @click="navCreate">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-cyan tn-color-white">
              <view class="tn-icon-flag-fill"></view>
            </view>  
            <view class="tn-color-white tn-text-sm tn-text-center">
              <text class="tn-text-ellipsis">出售闲置</text>
            </view>
          </view>
        </view>
      </view>
      
      
    </tn-landscape>



    <view class="bg-tabbar-shadow"></view>
    
    
  </view>
  
  
</template>

<script>
  export default {
    name: 'PagesB',
    data() {
      return {
        
            cardCur: 0,
            /* swiperList: [{
              id: 0,
              type: 'image',
              url: 'https://resource.tuniaokj.com/images/swiper/fullbg1.jpg',
              pngurl: 'https://resource.tuniaokj.com/images/swiper/full1.png',
              mp4: 'https://resource.tuniaokj.com/images/new/111.mp4'
            }, {
              id: 1,
              type: 'image',
              url: 'https://resource.tuniaokj.com/images/swiper/fullbg2.jpg',
              pngurl: 'https://resource.tuniaokj.com/images/swiper/full2.png',
              mp4: 'https://resource.tuniaokj.com/images/new/22.mp4'
            }, {
              id: 2,
              type: 'image',
              url: 'https://resource.tuniaokj.com/images/swiper/fullbg1.jpg',
              pngurl: 'https://resource.tuniaokj.com/images/swiper/full3.png',
              mp4: 'https://resource.tuniaokj.com/images/new/33.mp4'
            }, {
              id: 3,
              type: 'image',
              url: 'https://resource.tuniaokj.com/images/swiper/fullbg2.jpg',
              pngurl: 'https://resource.tuniaokj.com/images/swiper/full4.png',
              mp4: 'https://resource.tuniaokj.com/images/new/111.mp4'
            }], */
            swiperList: [{
              id: 0,
              type: 'image',
              title: '合作勾搭',
              name: '作者微信 tnkewo',
              url: 'https://cdn.nlark.com/yuque/0/2021/jpeg/280373/1631439429594-assets/web-upload/f78b307b-c107-4691-899e-993be50e9523.jpeg',
            }, {
              id: 1,
              type: 'image',
              title: '海量分享',
              name: '总有你想不到的创意',
              url: 'https://cdn.nlark.com/yuque/0/2021/jpeg/280373/1631439422592-assets/web-upload/1822106b-fb22-4518-b6e4-1764b379b7d6.jpeg',
            }, {
              id: 2,
              type: 'image',
              title: '酷炫多彩',
              name: '更多彩蛋等你探索',
              url: 'https://cdn.nlark.com/yuque/0/2021/jpeg/280373/1631439429574-assets/web-upload/100a3d32-ef5d-498b-9792-cf669e0d0862.jpeg',
            }, {
              id: 3,
              type: 'image',
              title: '适配多端',
              name: 'APP、微信小程序、H5、Finclip',
              url: 'https://cdn.nlark.com/yuque/0/2021/jpeg/280373/1631439429267-assets/web-upload/2a7e6a56-257a-4057-9dc9-ec264a7b7c14.jpeg',
            }],
            current: 0,
            scrollList: [
              {name: '广场'},
              {name: '资源'},
              {name: '活动'}
            ],
            latestUserAvatar: [
              {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
              {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
              {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
              {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
            ],
            bloggerList: [{
              id: 0,
              type: 'image',
              name: 'UI设计',
              text: '629人关注',
              icon: 'add-fill',
              color: 'add',
              url: 'https://resource.tuniaokj.com/images/simple/image2.jpg',
            }, {
              id: 1,
              type: 'image',
              name: '前端开发',
              text: '688人关注',
              icon: 'more-circle-fill',
              color: 'more',
              url: 'https://resource.tuniaokj.com/images/simple/image3.jpg',
            }, {
              id: 2,
              type: 'image',
              name: '校园生活',
              text: '552人关注',
              icon: 'more-circle-fill',
              color: 'more',
              url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1668741466042-assets/web-upload/68dbd7f5-4f67-4db1-ae3c-28fdc808a851.jpeg',
            }, {
              id: 3,
              type: 'image',
              name: '户外摄影',
              text: '105人关注',
              icon: 'add-fill',
              color: 'add',
              url: 'https://resource.tuniaokj.com/images/simple/banner3.jpg',
            }, {
              id: 4,
              type: 'image',
              name: '电影点评',
              text: '387人关注',
              icon: 'add-fill',
              color: 'add',
              url: 'https://resource.tuniaokj.com/images/simple/image0.jpg',
            }, {
              id: 5,
              type: 'image',
              name: '唯美动漫',
              text: '643人关注',
              icon: 'more-circle-fill',
              color: 'more',
              url: 'https://resource.tuniaokj.com/images/simple/image5.jpg',
            }],
            // 内容默认隐藏显示的高度
            contentHideShowHeight: 0,
            content: [
              {
                userAvatar: 'https://resource.tuniaokj.com/images/simple/image1.jpg',
                userName: '图鸟东东',
                date: '2023-10-22 12:11:21',
                label: ['校园生活','运动器材'],
                desc: '想收一个质量好一点的羽毛球拍，当然能约着一起打羽毛球就更好了',
                content: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫的前端页面，吖，编不下去了',
                viewUser: {
                  latestUserAvatar: [
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                  ],
                  viewUserCount: 62
                },
                collectionCount: 439,
                commentCount: 46,
                likeCount: 83
              },
              {
                userAvatar: 'https://resource.tuniaokj.com/images/simple/yuan1.jpg',
                userName: '徐同学吖',
                date: '2023-10-21 18:36:02',
                label: ['失物招领','校园生活'],
                desc: '捡到一张校园卡，麻烦付雨其同学，看到后联系微信 tnkewo 领取',
                content: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫的前端页面，吖，编不下去了',
                mainImage:[
                  'https://resource.tuniaokj.com/images/simple/banner2.jpg'
                ],
                viewUser: {
                  latestUserAvatar: [
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                  ],
                  viewUserCount: 12
                },
                collectionCount: 902,
                commentCount: 64,
                likeCount: 83
              },
              {
                userAvatar: 'https://resource.tuniaokj.com/images/simple/image8.jpg',
                userName: '图鸟北北',
                date: '2023-10-21 14:21:19',
                label: [],
                desc: '',
                content: '',
                mainImage:[
                  'https://resource.tuniaokj.com/images/simple/image6.jpg',
                  'https://resource.tuniaokj.com/images/simple/image7.jpg',
                ],
                viewUser: {
                  latestUserAvatar: [
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
                  ],
                  viewUserCount: 56
                },
                collectionCount: 431,
                commentCount: 26,
                likeCount: 84
              },
              {
                userAvatar: 'https://resource.tuniaokj.com/images/simple/image9.jpg',
                userName: '图鸟北北',
                date: '2023-10-21 12:02:58',
                label: ['树洞表白'],
                desc: 'XXX我喜欢你',
                content: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫的前端页面，吖，编不下去了 基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫的前端页面，吖，编不下去了',
                mainImage:[
                  'https://resource.tuniaokj.com/images/simple/image4.jpg',
                  'https://resource.tuniaokj.com/images/simple/banner2.jpg',
                  'https://resource.tuniaokj.com/images/simple/banner3.jpg',
                ],
                viewUser: {
                  latestUserAvatar: [
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
                  ],
                  viewUserCount: 231
                },
                collectionCount: 780,
                commentCount: 89,
                likeCount: 82
              },
              {
                userAvatar: 'https://resource.tuniaokj.com/images/simple/image2.jpg',
                userName: '图鸟北北',
                date: '2023-10-21 08:29:45',
                label: ['考证驾校'],
                desc: 'https://www.yuque.com/tuniao',
                mainImage:[
                  'https://resource.tuniaokj.com/images/simple/image0.jpg',
                  'https://resource.tuniaokj.com/images/simple/logo-flower.jpg',
                  'https://resource.tuniaokj.com/images/simple/banner0.jpg',
                  'https://resource.tuniaokj.com/images/simple/image3.jpg',
                ],
                viewUser: {
                  latestUserAvatar: [
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
                  ],
                  viewUserCount: 28
                },
                collectionCount: 432,
                commentCount: 33,
                likeCount: 12
              },
              {
                userAvatar: 'https://resource.tuniaokj.com/images/simple/image4.jpg',
                userName: '图鸟北北',
                date: '2023-10-21 06:12:23',
                label: ['开源','创意'],
                desc: '开源可商用组件',
                mainImage:[
                  'https://resource.tuniaokj.com/images/simple/banner1.jpg',
                  'https://resource.tuniaokj.com/images/simple/banner3.jpg',
                  'https://resource.tuniaokj.com/images/simple/image4.jpg',
                  'https://resource.tuniaokj.com/images/simple/image6.jpg',
                  'https://resource.tuniaokj.com/images/simple/image7.jpg',
                ],
                viewUser: {
                  latestUserAvatar: [
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
                  ],
                  viewUserCount: 65
                },
                collectionCount: 265,
                commentCount: 22,
                likeCount: 62
              }
            ],
            reserve: [{
                userAvatar: 'https://resource.tuniaokj.com/images/simple/image5.jpg',
                userName: '图鸟北北',
                date: '2023-10-20 22:12:09',
                color: 'red',
                label: ['新年祝福'],
                title: '2023年祝福接力',
                desc: '祝福接力活动：预约接龙的用户，将收到祝福通知',
                mainImage: 'https://resource.tuniaokj.com/images/simple/image0.jpg',
                viewUser: {
                  latestUserAvatar: [{
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                    },
                  ],
                  viewUserCount: 567
                },
                collectionCount: 543,
                commentCount: 543,
                likeCount: 206
              },
              {
                userAvatar: 'https://resource.tuniaokj.com/images/simple/image8.jpg',
                userName: '图鸟北北',
                date: '2023-10-20 22:06:30',
                color: 'cyan',
                label: ['时光信件'],
                title: '寄给十年后自己',
                desc: '时光邮局：预约接龙的用户，十年后，将收到一份来着十年前发出的信件',
                mainImage: 'https://resource.tuniaokj.com/images/simple/image1.jpg',
                viewUser: {
                  latestUserAvatar: [{
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                    },
                  ],
                  viewUserCount: 987
                },
                collectionCount: 567,
                commentCount: 69,
                likeCount: 65
              },
              {
                userAvatar: 'https://resource.tuniaokj.com/images/simple/image4.jpg',
                userName: '图鸟北北',
                date: '2023-10-20 16:48:33',
                color: 'blue',
                label: ['纪念日'],
                title: '常常忘记纪念日？',
                desc: '纪念日提醒：预约接龙的用户，微信上将收到纪念日提醒通知',
                mainImage: 'https://resource.tuniaokj.com/images/simple/image3.jpg',
                viewUser: {
                  latestUserAvatar: [{
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                    },
                  ],
                  viewUserCount: 321
                },
                collectionCount: 654,
                commentCount: 232,
                likeCount: 543
              },
              {
                userAvatar: 'https://resource.tuniaokj.com/images/simple/image5.jpg',
                userName: '图鸟北北',
                date: '2023-10-20 15:43:21',
                color: 'green',
                label: ['团购接龙'],
                title: '冰箱空空如也？一起团购屯菜吖',
                desc: '团购活动：预约接龙的用户，将参与一起来买菜',
                mainImage: 'https://resource.tuniaokj.com/images/simple/image8.jpg',
                viewUser: {
                  latestUserAvatar: [{
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                    },
                  ],
                  viewUserCount: 230
                },
                collectionCount: 987,
                commentCount: 236,
                likeCount: 342
              },
              {
                userAvatar: 'https://resource.tuniaokj.com/images/simple/yuan1.jpg',
                userName: '图鸟北北',
                date: '2023-10-20 11:20:42',
                color: 'orange',
                label: ['回母校'],
                title: '常回家看看',
                desc: '线下活动：预约接龙的用户，将表示参与了活动当天回母校',
                mainImage: 'https://resource.tuniaokj.com/images/simple/image2.jpg',
                viewUser: {
                  latestUserAvatar: [{
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                    },
                  ],
                  viewUserCount: 106
                },
                collectionCount: 765,
                commentCount: 32,
                likeCount: 91
              },
              {
                userAvatar: 'https://resource.tuniaokj.com/images/simple/image3.jpg',
                userName: '图鸟北北',
                date: '2023-10-20 10:11:49',
                color: 'purplered',
                label: ['婚礼'],
                title: '我们结婚啦',
                desc: '婚礼请帖：欢迎来参加我们的婚礼宴席，不用随礼',
                mainImage: 'https://resource.tuniaokj.com/images/simple/banner3.jpg',
                viewUser: {
                  latestUserAvatar: [{
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                    },
                  ],
                  viewUserCount: 232
                },
                collectionCount: 776,
                commentCount: 48,
                likeCount: 86
              },
              {
                userAvatar: 'https://resource.tuniaokj.com/images/simple/banner2.jpg',
                userName: '图鸟北北',
                date: '2023-10-20 10:10:12',
                color: 'purple',
                label: ['大扫除'],
                title: '组队参加大扫除公益活动',
                desc: '活动组队：预约接龙的学生，将表示参与了当天的大扫除活动',
                mainImage: 'https://resource.tuniaokj.com/images/simple/image8.jpg',
                viewUser: {
                  latestUserAvatar: [{
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                    },
                  ],
                  viewUserCount: 456
                },
                collectionCount: 342,
                commentCount: 42,
                likeCount: 76
              },
              {
                userAvatar: 'https://resource.tuniaokj.com/images/simple/image0.jpg',
                userName: '图鸟北北',
                date: '2023-10-20 08:56:01',
                color: 'brown',
                label: ['新疆出游'],
                title: '一起组队去新疆看西西',
                desc: '旅游出行：一起去新疆看西西',
                mainImage: 'https://resource.tuniaokj.com/images/simple/image8.jpg',
                viewUser: {
                  latestUserAvatar: [{
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
                    },
                    {
                      src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
                    },
                  ],
                  viewUserCount: 129
                },
                collectionCount: 265,
                commentCount: 22,
                likeCount: 62
              }
            ],
            adList: [
              {image: 'https://resource.tuniaokj.com/images/simple/image1.jpg'},
              {image: 'https://resource.tuniaokj.com/images/simple/image9.jpg'},
              {image: 'https://resource.tuniaokj.com/images/simple/image3.jpg'},
              {image: 'https://resource.tuniaokj.com/images/simple/image8.jpg'},
              {image: 'https://resource.tuniaokj.com/images/simple/image0.jpg'}
            ],
            adAutoplay: false,
            
            
            /* 瀑布流*/
            loadStatus: 'loadmore',
            list: [],
            data: [
              {
                title: '创业者联盟网站推荐',
                userName: '图鸟北北',
                mainImage: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1677563535368-assets/web-upload/3505dd13-c7e5-4d2e-bcd4-229172acfb52.jpeg',
                userImage: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1664005699098-assets/web-upload/e8b29292-72fc-4c1e-9d7c-fd9dba31cb62.jpeg',
                storeType: 1, // 1 自营 2 第三方店铺
                newProduct: true, // 是否为新品
                tags: ['工具'],
                price: 12,
                likeCount: 2,
                viewUser: {
                  latestUserAvatar: [
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                  ],
                  viewUserCount: 338
                },
              },
              {
                title: '六个优秀的icon网站推荐',
                userName: '你的名字',
                mainImage: 'https://cdn.nlark.com/yuque/0/2021/jpeg/280373/1629788206008-assets/web-upload/b82bc25b-c18f-4cd8-80ef-a1e9694d099a.jpeg',
                userImage: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
                storeType: 1, // 1 自营 2 第三方店铺
                newProduct: false, // 是否为新品
                tags: ['网站','icon'],
                price: 0.05,
                likeCount: 21,
                viewUser: {
                  latestUserAvatar: [
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                  ],
                  viewUserCount: 289
                },
              },
              {
                title: '推荐10个程序员接私活的网站',
                userName: '青梅煮马',
                mainImage: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1677563535269-assets/web-upload/2c5b95d2-e3f1-4e43-848b-c401971dc4ac.jpeg',
                userImage: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
                storeType: 1, // 1 自营 2 第三方店铺
                newProduct: true, // 是否为新品
                tags: ['接单','网站'],
                price: 200,
                likeCount: 6,
                viewUser: {
                  latestUserAvatar: [
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                  ],
                  viewUserCount: 381
                },
              },
              {
                title: '精美动画交互元素网站',
                userName: '你的名字',
                mainImage: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1677563535312-assets/web-upload/4582985e-dfa3-4cf9-81d5-214a053a0b3c.jpeg',
                userImage: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
                storeType: 1, // 1 自营 2 第三方店铺
                newProduct: true, // 是否为新品
                tags: ['网站','交互'],
                price: 0.01,
                likeCount: 54,
                viewUser: {
                  latestUserAvatar: [
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                  ],
                  viewUserCount: 526
                },
              },
              {
                title: '创意免费样机推荐',
                userName: '捉住那只猪',
                mainImage: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1673946192945-assets/web-upload/2f962690-4303-459d-8d19-1502f971cc4f.jpeg',
                userImage: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
                storeType: 1, // 1 自营 2 第三方店铺
                newProduct: false, // 是否为新品
                tags: [],
                price: 20,
                likeCount: 43,
                viewUser: {
                  latestUserAvatar: [
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                  ],
                  viewUserCount: 372
                },
              },
              {
                title: '使用codepen获取优秀前端示例代码',
                userName: '捉住那只猪',
                mainImage: 'https://cdn.nlark.com/yuque/0/2021/jpeg/280373/1629966189621-assets/web-upload/b9346c08-8e01-4d75-956d-80fced880b4e.jpeg',
                userImage: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
                storeType: 2, // 1 自营 2 第三方店铺
                newProduct: false, // 是否为新品
                tags: [],
                price: 30,
                likeCount: 0,
                viewUser: {
                  latestUserAvatar: [
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                  ],
                  viewUserCount: 694
                },
              },
              {
                title: '带有动画的跨路由共享组件',
                userName: '捉住那只猪',
                mainImage: 'https://cdn.nlark.com/yuque/0/2021/jpeg/280373/1629709462365-assets/web-upload/06b5843c-eac8-4bdf-b2fb-c8b755db970d.jpeg',
                userImage: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
                storeType: 2, // 1 自营 2 第三方店铺
                newProduct: false, // 是否为新品
                tags: ['组件','动画'],
                price: 66,
                likeCount: 21,
                viewUser: {
                  latestUserAvatar: [
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                  ],
                  viewUserCount: 508
                },
              },
              {
                title: '免费开源可商用的酷炫UI组件-图鸟UI',
                userName: '你的名字',
                mainImage: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1661311317595-assets/web-upload/d0effa8c-78f5-477f-b070-481840860bfe.jpeg',
                userImage: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
                storeType: 1, // 1 自营 2 第三方店铺
                newProduct: false, // 是否为新品
                tags: ['图鸟','开源'],
                price: 60,
                likeCount: 39,
                viewUser: {
                  latestUserAvatar: [
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                  ],
                  viewUserCount: 923
                },
              },
              {
                title: '全球各类公开API集合',
                userName: '图鸟北北',
                mainImage: 'https://cdn.nlark.com/yuque/0/2021/jpeg/280373/1629730817280-assets/web-upload/07b115b6-98d7-4557-97c3-9da3b501737e.jpeg',
                userImage: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
                storeType: 1, // 1 自营 2 第三方店铺
                newProduct: false, // 是否为新品
                tags: ['API','集合'],
                price: 488,
                likeCount: 66,
                viewUser: {
                  latestUserAvatar: [
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                  ],
                  viewUserCount: 989
                },
              },
              {
                title: '前端案例特效之毛玻璃',
                userName: '捉住那只猪',
                mainImage: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1673946313110-assets/web-upload/1b54de19-9cc7-47d4-84f8-69bc19d692c6.jpeg',
                userImage: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
                storeType: 1, // 1 自营 2 第三方店铺
                newProduct: false, // 是否为新品
                tags: ['主题','前端'],
                price: 0.01,
                likeCount: 12,
                viewUser: {
                  latestUserAvatar: [
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
                    {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
                  ],
                  viewUserCount: 129
                },
              }
            ],
            
            planList: [{
              name: '书籍资料',
              color: 'red',
              time: '2021-12-13 06:20',
            }, {
              name: '电子数码',
              color: 'cyan',
              time: '8:37',
            }, {
              name: '卡票转让',
              color: 'blue',
            }, {
              name: '代步工具',
              color: 'green',
            }, {
              name: '体育器材',
              color: 'orange',
            }, {
              name: '其他',
              color: 'purplered',
            }],
            
            /* 压屏窗*/
            show2: false,
            maskCloseable: true,
      }
    },

    onLoad() {
      this.initContentData()
      this.contentHideShowHeight = uni.upx2px(56) * 3
    },
    onReady() {
      // this.$nextTick(() => {
      //   this.getContentRectInfo()
      // })
    },
    onShow() {
      this.adAutoplay = true
    },
    onHide() {
      this.adAutoplay = false
    },
    /* 瀑布流*/
    created() {
      this.getRandomData()
    },
    
    methods: {
      // 跳转
      tn(e) {
        uni.navigateTo({
          url: e,
        });
      },
      
        // cardSwiper
        cardSwiper(e) {
          this.cardCur = e.detail.current
          for (let i = 0; i < this.swiperList.length; i++) {
            const videoContext = uni.createVideoContext(`video-${this.swiperList[i]['id']}`, this)
            if (i === this.cardCur) {
              // #ifdef H5
              videoContext.play()
              // #endif
              // #ifndef H5
              videoContext.play()
              // #endif
              
            } else {
              // #ifdef MP-WEIXIN
              videoContext.stop()
              // #endif
              // #ifndef MP-WEIXIN
              videoContext.pause()
              // #endif
            }
          }
        },
        // 暂停所有视频
        stopAllVideo() {
          this.current = 0
        },
        // tab选项卡切换
        tabChange(index) {
          this.current = index
        },
        // 跳转
        tn(e) {
        	uni.navigateTo({
        		url: e,
        	});
        },
        // 震动跳转
        navEdit(e) {
          wx.vibrateLong();
          uni.navigateTo({
            url: '/circlePages/edit'
          })
        },
        // 震动跳转
        navCreate(e) {
          wx.vibrateLong();
          uni.navigateTo({
            url: '/circlePages/create'
          })
        },
        // 震动跳转
        navBuild(e) {
          wx.vibrateLong();
          uni.navigateTo({
            url: '/circlePages/build'
          })
        },
        // 处理内容，给内容添加对应的标识信息
        initContentData() {
          this.content.forEach((item, index) => {
            // 是否需要隐藏内容
            item.hideContent = false
            // 显示所有内容
            item.showAllContent = false
            // 内容容器的实际高度
            item.contentContainerHeight = 0
            // 内容容器是否初始化完成
            item.contentContainerInit = false
            this.$set(this.content, index, item)
          })
        },
        // 获取内容容器的信息
        getContentRectInfo() {
          let contentRect = {}
          const query = uni.createSelectorQuery().in(this)
          // 筛选出存在内容的数据
          this.content.forEach((item, index) => {
            if (item?.content) {
              query.select(`#blogger__content--${index}`).boundingClientRect()
              contentRect[index] = item
            }
          })
          // 获取所有内容的宽高信息
          query.exec(res => {
            if (!res) {
              setTimeout(() => {
                this.getContentRectInfo()
              }, 10)
              return
            }
            // console.log(res);
            res.map((item) => {
              // console.log(item.height, this.contentHideShowHeight);
              // 获取对应的标号
              const id = item.id
              const idIndex = /blogger__content--(\d)/.exec(id)[1]
              let contentItem = this.content[idIndex]
              contentItem.hideContent = item.height > this.contentHideShowHeight
              contentItem.showAllContent = false
              contentItem.contentContainerHeight = item.height
              contentItem.contentContainerInit = true
              this.$set(this.content, idIndex, contentItem)
              
              // console.log(/blogger__content--(\d)/.exec(id)[1]);
            })
          })
        },
        // 切换内容的显示与隐藏
        switchContentShowStatus(index) {
          const contentItem = this.content[index]
          contentItem.showAllContent = !contentItem.showAllContent
          this.$set(this.content, index, contentItem)
        },
        
        // 弹出压屏窗
        showLandscape() {
          this.openLandscape()
        },
        // 打开压屏窗
        openLandscape() {
          // wx.vibrateLong();
          this.show2 = true
        },
        // 关闭压屏窗
        closeLandscape() {
          this.show2 = false
        },
        
        /* 瀑布流*/
        // 获取随机数据
        getRandomData() {
          this.loadStatus = 'loading'
          for (let i = 0; i < 10; i++) {
            let index = this.$t.number.randomInt(0, this.data.length - 1)
            let item = JSON.parse(JSON.stringify(this.data[index]))
            let price = this.getPrice(item.price)
            item.id = this.$t.uuid()
            item.priceInteger = price[0]
            item.priceDecimal = price[1]
            this.list.push(item)
          }
        },
        // 瀑布流加载完毕事件
        handleWaterFallFinish() {
          this.loadStatus = 'loadmore'
        },
        // 获取价格整数和小数部分
        getPrice(price) {
          const priceStr = String(price)
          if (priceStr.indexOf('.') !== -1) {
            return priceStr.split('.')
          } else {
            return [priceStr, '00']
          }
        }
      
    }
  }
</script>

<style lang="scss" scoped>
  .page-b {
    max-height: 100vh;
    }
    
  /* 底部安全边距 start*/
  .tn-tabbar-height {
  	min-height: 120rpx;
  	height: calc(140rpx + env(safe-area-inset-bottom) / 2);
    height: calc(140rpx + constant(safe-area-inset-bottom));
  }  
  
  /* 底部tabbar假阴影 start*/
  .bg-tabbar-shadow{
    // background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.1) 10rpx, rgba(255,255,255,0) , rgba(255,255,255,0));
    box-shadow: 0rpx 0rpx 400rpx 0rpx rgba(0, 0, 0, 0.25);
    position: fixed;
    bottom: calc(0rpx + env(safe-area-inset-bottom) / 2);
    bottom: calc(0rpx + constant(safe-area-inset-bottom));
    height: 60rpx;
    width: 100vw;
    z-index: 0;
  }
  
  /* 自定义导航栏内容 start */
    .custom-nav {
      height: 100%;
      
      &__back {
        margin: auto 5rpx;
        font-size: 60rpx;
        margin-right: 10rpx;
        margin-left: 30rpx;
        flex-basis: 5%;
      }
      
      &__search {
        flex-basis: 60%;
        width: 100%;
        height: 100%;
        
        &__box {
          width: 100%;
          height: 70%;
          padding: 10rpx 0;
          margin: 0 30rpx;
          border-radius: 60rpx 60rpx 0 60rpx;
          font-size: 24rpx;
        }
        
        &__icon {
          padding-right: 10rpx;
          margin-left: 20rpx;
          font-size: 30rpx;
        }
        
        &__text {
          color: #AAAAAA;
        }
      }
    }
  
    /* 自定义导航栏内容 end */
    /* 博主头像 start*/
    .image-circle{
      // padding: 95rpx;
      width: 190rpx;
      height: 190rpx;
      font-size: 40rpx;
      font-weight: 300;
      position: relative;
    }
    .image-pic{
      border: 1rpx solid #F8F7F8;
      background-size: cover;
      background-repeat:no-repeat;
      // background-attachment:fixed;
      background-position:top;
      border-radius: 10rpx;
    }
    
    .tn-color-more{
      color: #1D2541;
    }
    .tn-color-add{
      color: #1D2541;
    }
    
    .tn-color-cat{
      color: #1D2541;
    }
    .tn-bg-cat{
      background-color: #1D2541;
    }
    
    /* 标签 start*/
    .tn-plan-content {
      &__item {
        display: inline-block;
        line-height: 45rpx;
        padding: 10rpx 30rpx;
        margin: 20rpx 20rpx 5rpx 0rpx;
        
        &--prefix {
          padding-right: 10rpx;
        }  
      }
    }
    /* 标签 end*/
    
  /* 文章内容 start*/
    .blogger {
      &__item {
        padding: 30rpx;
      }
      
      &__author {
        &__btn {
          margin-right: -12rpx;
          opacity: 0.5;
        }
      }
      
      &__desc {
        line-height: 30rpx;
        
        &__label {
          
          color: #1D2541;
          background-color: #F3F2F7;
          border-radius: 10rpx;
          font-size: 22rpx;
          
          padding: 5rpx 15rpx;
          margin: 5rpx 18rpx 0 0;
          
          &--prefix {
            font-size: 24rpx;
            color: #1D2541;
            padding-right: 10rpx;
          }
        }
        &__content {
          line-height: 50rpx;
        }
      }
      
      &__content {
        margin-top: 18rpx;
        padding-right: 18rpx;
        
        &__data {
          line-height: 46rpx;
          text-align: justify;
          overflow: hidden;
          transition: all 0.25s ease-in-out;
  
        }
        
        &__status {
          margin-top: 10rpx;
          font-size: 26rpx;
          color: #82B2FF;
        }
      }
      
      &__main-image {
        border: 1rpx solid #F8F7F8;
        border-radius: 16rpx;
        
        &--1 {
          max-width: 80%;
          max-height: 300rpx;
        }
        
        &--2 {
          max-width: 260rpx;
          max-height: 260rpx;
        }
        
        &--3 {
          height: 192rpx;
          width: 100%;
        }
      }
      
      &__count-icon {
        padding-right: 5rpx;
      }
      
      &__ad {
        width: 100%;
        height: 500rpx;
        transform: translate3d(0px, 0px, 0px) !important;
        
        ::v-deep .uni-swiper-slide-frame {
          transform: translate3d(0px, 0px, 0px) !important;
        }
        .uni-swiper-slide-frame {
          transform: translate3d(0px, 0px, 0px) !important;
        }
        
        &__item {
          position: absolute;
          width: 100%;
          height: 100%;
          transform-origin: left center;
          transform: translate3d(100%, 0px, 0px) scale(1) !important;
          transition: transform 0.25s ease-in-out;
          z-index: 1;
          
          &--0 {
            transform: translate3d(0%, 0px, 0px) scale(1) !important;
            z-index: 4;
          }
          &--1 {
            transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
            z-index: 3;
          }
          &--2 {
            transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
            z-index: 2;
          }
        }
        
        &__content {
          border-radius: 40rpx;
          width: 640rpx;
          height: 500rpx;
          overflow: hidden;
        }
        
        &__image {
          width: 100%;
          height: 100%;
        }
      }
    }
    /* 文章内容 end*/
     
     /* 间隔线 start*/
    .tn-strip-bottom {
     width: 100%;
     border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
    }
     /* 间隔线 end*/
     
    /* 阴影 start*/
    .home-shadow {
      border-radius: 15rpx;
      box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
    }    
     
    
    /* 广告内容 start */
    .ad-image{
      width: 80rpx;
      height: 80rpx;
      position: relative;
    }
    .ad-pic{
      background-size: cover;
      background-repeat:no-repeat;
      // background-attachment:fixed;
      background-position:top;
      border-radius: 20%;
    }
    /* 自定义导航栏内容 end */
    
    
    /* 全屏轮播  start*/
    /* .card-swiper {
      height: 100vh !important;
    }
      
    .card-swiper swiper-item {
      width: 750rpx !important;
      left: 0rpx;
      box-sizing: border-box;
      overflow: initial;
    }
      
    .card-swiper swiper-item .swiper-item {
      width: 100%;
      display: block;
      height: 100vh;
      border-radius: 0rpx;
      transform: scale(1);
      transition: all 0.2s ease-in 0s;
      overflow: hidden;
    }
      
    .card-swiper swiper-item.cur .swiper-item {
      transform: none;
      transition: all 0.2s ease-in 0s;
    }
      
    .card-swiper swiper-item .swiper-item-png {
      margin-top: -50vh;
      width: 100%;
      display: block;
      border-radius: 0rpx;
      transform: translate(1040rpx, 20rpx) scale(0.5, 0.5);
      transition: all 0.6s ease 0s;
      // overflow: hidden;
    }
      
    .card-swiper swiper-item.cur .swiper-item-png {
      margin-top: -100vh;
      width: 900rpx;
      transform: translate(-80rpx, 0rpx) scale(1, 1);
      transition: all 0.6s ease 0s;
    }
    .image-banner{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .image-banner image{
      width: 100%;
    } */
    
    /* 轮播指示点 start*/
    /* .indication{
      z-index: 9999;
      width: 100%;
      height: 36rpx;
      position: fixed;
      // display:flex;
      display: block;
      flex-direction:row;
      align-items:center;
      justify-content:center;
    }
    
    .spot{
      background-color: #000;
      opacity: 0.3;
      width: 10rpx;
      height: 10rpx;
      border-radius: 20rpx;
      margin: 20rpx 0 !important;
      left: 95vw;
      top: -60vh;
      position: relative;
    }
    
    .spot.active{
      opacity: 0.6;
      height: 30rpx;
      background-color: #000;
    }  */
    
    /* 轮播视觉差 start */
    .card-swiper {
      height: 330rpx !important;
    }
      
    .card-swiper swiper-item {
      width: 750rpx !important;
      left: 0rpx;
      box-sizing: border-box;
      padding: 40rpx 30rpx 30rpx 30rpx;
      overflow: initial;
    }
      
    .card-swiper swiper-item .swiper-item {
      width: 100%;
      display: block;
      height: 100%;
      border-radius: 10rpx;
      transform: scale(1);
      transition: all 0.2s ease-in 0s;
      will-change: transform;
      // overflow: hidden;
    }
      
    .card-swiper swiper-item.cur .swiper-item {
      transform: none;
      transition: all 0.2s ease-in 0s;
      will-change: transform;
    }
      
    .card-swiper swiper-item .swiper-item-text {
      margin-top: -160rpx;
      text-align: center;
      width: 100%;
      display: block;
      height: 50%;
      border-radius: 10rpx;
      transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
      transition: all 0.6s ease 0s;
      will-change: transform;
      overflow: hidden;
    }
      
    .card-swiper swiper-item.cur .swiper-item-text {
      margin-top: -220rpx;
      width: 100%;
      transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
      transition: all 0.6s ease 0s;
      will-change: transform;
    }
    
    .image-banner{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .image-banner image{
      width: 100%;
      height: 100%;
    }
    
    /* 轮播指示点 start*/
    .indication{
      z-index: 9999;
      width: 100%;
      height: 36rpx;
      position: absolute;
      display:flex;
      flex-direction:row;
      align-items:center;
      justify-content:center;
    }
    
    .spot{
      background-color: #FFFFFF;
      opacity: 0.6;
      width: 10rpx;
      height: 10rpx;
      border-radius: 20rpx;
      top: -70rpx;
      margin: 0 8rpx !important;
      position: relative;
    }
    
    .spot.active{
      opacity: 1;
      width: 30rpx;
      background-color: #FFFFFF;
    }
    
    /* 资讯主图 start*/
    .image-article {
      border-radius: 8rpx;
      border: 1rpx solid #F8F7F8;
      width: 200rpx;
      height: 200rpx;
      position: relative;
    }
    
    .image-pic {
      background-size: cover;
      background-repeat: no-repeat;
      // background-attachment:fixed;
      background-position: top;
      border-radius: 10rpx;
    }
    
    .article-shadow {
      border-radius: 15rpx;
      box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
    }
    
    /* 文字截取*/
    .clamp-text-1 {
      -webkit-line-clamp: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    
    .clamp-text-2 {
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    
    /* 标签内容 start*/
    .tn-tag-content {
      &__item {
        display: inline-block;
        line-height: 35rpx;
        color: #1D2541;
        background-color: #F3F2F7;
        border-radius: 10rpx;
        font-size: 22rpx;
        padding: 5rpx 15rpx;
    
        &--prefix {
          padding-right: 10rpx;
        }
      }
    }
    
    
    /* 图标容器9 start */
    .icon9 {
      &__item {
        width: 30%;
        background-color: #FFFFFF;
        border-radius: 10rpx;
        padding: 30rpx;
        margin: 20rpx 10rpx;
        transform: scale(1);
        transition: transform 0.3s linear;
        transform-origin: center center;
        
        &--icon {
          width: 110rpx;
          height: 110rpx;
          font-size: 65rpx;
          border-radius: 50%;
          margin: 20rpx 40rpx;
          position: relative;
          z-index: 1;
          
          &::after {
            content: " ";
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            left: 0;
            bottom: 0;
            border-radius: inherit;
            opacity: 1;
            transform: scale(1, 1);
            background-size: 100% 100%;
            background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
          }
        }
      }
    }
    
    
    /* 悬浮 */
    .tnxuanfu{
      animation: suspension 3s ease-in-out infinite;
    }
    
    @keyframes suspension {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-0.8rem);
      }
    }
    /* 悬浮按钮 */
    .button-shop {
      width: 90rpx;
      height: 90rpx;
      display: flex;
      flex-direction: row;
      position: fixed;
      /* bottom:200rpx;
        right: 20rpx; */
      left: 5rpx;
      top: 5rpx;
      z-index: 1001;
      border-radius: 100px;
      opacity: 0.9;
    }
    
    
    /* 按钮 */
    .edit {
      bottom: 300rpx;
      right: 75rpx;
      position: fixed;
      z-index: 9999;
    }
    
    
    .pa,
    .pa0 {
      position: absolute
    }
    
    .pa0 {
      left: 0;
      top: 0
    }
    
    
    .bg0 {
      width: 100rpx;
      height: 100rpx;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    .bg1 {
      width: 100%;
      height: 100%;
    }
    
    
    
    
    .hx-box {
      top: 50%;
      left: 50%;
      width: 100rpx;
      height: 100rpx;
      transform-style: preserve-3d;
      transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
    }
    
    .hx-box .pr {
      width: 100rpx;
      height: 100rpx;
      transform-style: preserve-3d;
      animation: hxz 20s linear infinite;
    }
    
    @keyframes hxz {
      0% {
        transform: rotateX(0deg);
      }
    
      100% {
        transform: rotateX(-360deg);
      }
    }
    
    
    
    .hx-box .pr .pa0 {
      width: 100rpx;
      height: 100rpx;
      /* border: 4px solid #5ec0ff; */
      border-radius: 1000px;
    }
    
    .hx-box .pr .pa0 .span {
      display: block;
      width: 100%;
      height: 100%;
      background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc4.png) no-repeat center center;
      background-size: 100% 100%;
      animation: hx 4s linear infinite;
    }
    
    @keyframes hx {
      to {
        transform: rotate(360deg);
      }
    }
    
    .hx-k1 {
      transform: rotateX(-60deg) rotateZ(-60deg)
    }
    
    .hx-k2 {
      transform: rotateX(-30deg) rotateZ(-30deg)
    }
    
    .hx-k3 {
      transform: rotateX(0deg) rotateZ(0deg)
    }
    
    .hx-k4 {
      transform: rotateX(30deg) rotateZ(30deg)
    }
    
    .hx-k5 {
      transform: rotateX(60deg) rotateZ(60deg)
    }
    
    .hx-k6 {
      transform: rotateX(90deg) rotateZ(90deg)
    }
    
    
    /* 用户头像 start */
    .logo-image {
      width: 40rpx;
      height: 40rpx;
      position: relative;
    }
    
    .logo-pic {
      background-size: cover;
      background-repeat: no-repeat;
      // background-attachment:fixed;
      background-position: top;
      border: 1rpx solid rgba(255,255,255,0.05);
      // box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
      border-radius: 50%;
      overflow: hidden;
      // background-color: #FFFFFF;
    }
    
    /* 头像 start */
    .logo-image2 {
      width: 90rpx;
      height: 90rpx;
      position: relative;
    }
    
    .logo-pic2 {
      background-size: cover;
      background-repeat: no-repeat;
      // background-attachment:fixed;
      background-position: top;
      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
      border-radius: 50%;
      overflow: hidden;
      // background-color: #FFFFFF;
    }
    
    /* 瀑布流*/
    .product__item {
      background-color: #FFFFFF;
      overflow: hidden;
      margin: 0 10rpx;
      margin-bottom: 20rpx;
      // box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
      
      .item {
        /* 图片 start */
        &__image {
          width: 100%;
          height: auto;
          background-color: #FFFFFF;
          border: 1rpx solid #F8F7F8;
          border-radius: 10rpx;
          overflow: hidden;
        }
        /* 图片 end */
        
        /* 内容 start */
        &__data {
          padding: 14rpx 0rpx;
        }
        
        /* 标题 start */
        &__title-container {
          text-align: justify;
          line-height: 38rpx;
          vertical-align: middle;
        }
        &__store-type {
          height: 28rpx;
          font-size: 20rpx;
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 4rpx;
          border-radius: 6rpx;
          white-space: nowrap;
          text-align: center;
          top: -2rpx;
          margin-right: 6rpx;
        }
        &__title {
          font-size: 28rpx;
        }
        /* 标题 end */
        
        /* 标签 start */
        &__tags-container {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-start;
        }
        &__tag {
          margin: 10rpx;
          color: #7C8191;
          background-color: #F3F2F7;
          padding: 4rpx 14rpx 6rpx;
          border-radius: 10rpx;
          font-size: 20rpx;
          
          &:first-child {
            margin-left: 0rpx !important;
          }
        }
        /* 标签 end */
        
        /* 价格 start */
        &__price-container {
          font-size: 24rpx;
          color: #E83A30;
        }
        &__price {
          &--unit {
            
          }
          &--integer {
            font-size: 38rpx;
          }
          &--decimal {
            
          }
        }
        /* 价格 end */
        /* 内容 end */
      }
    }
  
</style>
